<%--
  Created by IntelliJ IDEA.
  User: 花花
  Date: 2021/6/20
  Time: 17:28
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>用户登陆</title>
</head>
<body style="margin: 0;
    padding: 0;
    background-image: url(new.jpg);
background-repeat: no-repeat;">
<div id="bigbox" style="margin: 0 auto;margin-top: 250px;
padding: 20px 50px;background-color: #00000090;
width: 400px;height: 300px;border-radius: 10px;text-align: center;">
    <h1 style="color: white">登陆/注册</h1>
    <form action="login" method="post" id="loginForm" style="margin-top: 30px;">
        <input style="margin-top: 20px;border: 0;padding: 10px 10px;border-bottom:1px solid white;background-color:#00000000;color:white;"
               placeholder="用户名" type="text" name="uname" id="uname" value="${messageModel.object.userName}"> <br>
        <input style="margin-top: 20px;border: 0;padding: 10px 10px;border-bottom:1px solid white;background-color:#00000000;color:white;"
               placeholder="密码" type="password" name="upwd" id="upwd" value="${messageModel.object.userPwd}"> <br>
        <span id="msg" style="font-size: 12px;color: red">${messageModel.msg}</span><br>
        <button style="border:0;width:75px;height:25px;color:white;border-radius: 20px;
        background-image: linear-gradient(to right, #b8cbb8 0%, #b8cbb8 0%, #b465da 0%, #cf6cc9 33%, #ee609c 66%, #ee609c 100%);"
                type="button" id="loginBtn">登陆</button>
        <button style="border:0;width:75px;height:25px;color:white;border-radius: 20px;
        background-image: linear-gradient(to right, #b8cbb8 0%, #b8cbb8 0%, #b465da 0%, #cf6cc9 33%, #ee609c 66%, #ee609c 100%);"
                type="button" id="registerBtn">注册</button>
    </form>
</div>
</body>
<script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
    /**
     * 登陆表单表单验证
     * 1.给登陆按钮绑定点击事件（通过id选择器绑定）
     * 2.获取用户姓名和密码的值
     * 3.判断姓名是否为空
     * 如果姓名为空，提示用户（span标签赋值），并且return
     * 4.判断密码是否为空
     * 如果密码为空，提示用户（span标签赋值），并且return
     * 5.如果都不为空，则手动提交表单
     */
    $("#loginBtn").click(function(){
        //获取用户姓名和密码的值
        var uname = $("#uname").val();
        var upwd = $("#upwd").val();
        //判断姓名是否为空
        if(isEmpty(uname)){
            //如果姓名为空，提示用户（span标签赋值），并且return
            $("#msg").html("用户姓名不可为空！");
            return;
        }
        //判断密码是否为空
        if(isEmpty(upwd)){
            //如果密码为空，提示用户（span标签赋值），并且return
            $("#msg").html("用户密码不可为空！");
            return;
        }
        //如果都不为空，则手动提交表单
        $("#loginForm").submit();
    });

    /**
     * 判断字符串是否为空
     * 如果为空，返回true
     * 如果不为空，返回false
     * @param str
     * @returns {boolean}
     */
    function isEmpty(str){
        if(str==null || str.trim()==""){
            return true;
        }
        return false;
    }

    /**
     * 注册页面跳转
     * 1.给注册按钮绑定点击事件（通过id选择器绑定）
     * 2.跳转到注册页面
     */
    $("#registerBtn").click(function (){
        document.location.href="register.jsp";
    })
</script>
</html>
